<template>
    <div class="progress-page">
        <!-- Header -->
        <van-nav-bar title="Learning Progress" left-text="Back" left-arrow @click-left="$router.back()" />

        <!-- Overall Progress -->
        <div class="overall-progress">
            <div class="progress-header">
                <h2>Overall Progress</h2>
                <div class="level-badge">
                    <van-icon name="medal-o" />
                    <span>Level {{ userLevel }}</span>
                </div>
            </div>

            <div class="progress-circle">
                <van-circle v-model:current-rate="overallProgress" :rate="overallProgress" :speed="100"
                    :text="overallProgressText" stroke-width="8" color="#07c160" />
            </div>

            <div class="progress-stats">
                <div class="stat-item">
                    <div class="stat-number">{{ userStats.totalSessions }}</div>
                    <div class="stat-label">Training Sessions</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ userStats.totalHours }}</div>
                    <div class="stat-label">Hours Practiced</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">{{ userStats.achievements }}</div>
                    <div class="stat-label">Achievements</div>
                </div>
            </div>
        </div>

        <!-- Skills Progress -->
        <div class="skills-progress">
            <h3>Skills Development</h3>
            <div class="skill-list">
                <div v-for="skill in skillsProgress" :key="skill.name" class="skill-item">
                    <div class="skill-header">
                        <span class="skill-name">{{ skill.name }}</span>
                        <span class="skill-level">{{ skill.level }}/10</span>
                    </div>
                    <van-progress :percentage="skill.progress" :stroke-width="6" :color="skill.color"
                        track-color="#f5f5f5" />
                    <div class="skill-description">{{ skill.description }}</div>
                </div>
            </div>
        </div>

        <!-- Recent Activities -->
        <div class="recent-activities">
            <h3>Recent Activities</h3>
            <div class="activity-list">
                <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                    <div class="activity-icon">
                        <van-icon :name="activity.icon" :color="activity.color" />
                    </div>
                    <div class="activity-content">
                        <div class="activity-title">{{ activity.title }}</div>
                        <div class="activity-description">{{ activity.description }}</div>
                        <div class="activity-time">{{ formatTime(activity.timestamp) }}</div>
                    </div>
                    <div class="activity-points">
                        <span>+{{ activity.points }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Goals Section -->
        <div class="goals-section">
            <h3>Current Goals</h3>
            <div class="goals-list">
                <div v-for="goal in currentGoals" :key="goal.id" class="goal-item">
                    <div class="goal-header">
                        <span class="goal-title">{{ goal.title }}</span>
                        <span class="goal-progress">{{ goal.current }}/{{ goal.target }}</span>
                    </div>
                    <van-progress :percentage="(goal.current / goal.target) * 100" :stroke-width="6" color="#667eea"
                        track-color="#f5f5f5" />
                    <div class="goal-deadline">Due: {{ formatDate(goal.deadline) }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'

// User stats
const userStats = ref({
    totalSessions: 24,
    totalHours: 18,
    achievements: 12,
    totalPoints: 2450
})

const userLevel = computed(() => {
    return Math.floor(userStats.value.totalPoints / 500) + 1
})

const overallProgress = ref(0)
const overallProgressText = computed(() => `${overallProgress.value}%`)

// Skills progress
const skillsProgress = ref([
    {
        name: 'Communication',
        level: 7,
        progress: 70,
        color: '#07c160',
        description: 'Expressing ideas clearly and effectively'
    },
    {
        name: 'Confidence',
        level: 5,
        progress: 50,
        color: '#1989fa',
        description: 'Building self-assurance in social situations'
    },
    {
        name: 'Empathy',
        level: 8,
        progress: 80,
        color: '#ff976a',
        description: 'Understanding and relating to others'
    },
    {
        name: 'Leadership',
        level: 4,
        progress: 40,
        color: '#ed4014',
        description: 'Guiding and inspiring others'
    },
    {
        name: 'Conflict Resolution',
        level: 6,
        progress: 60,
        color: '#9c26b0',
        description: 'Managing and resolving disagreements'
    }
])

// Recent activities
const recentActivities = ref([
    {
        id: 1,
        title: 'Completed Training Session',
        description: 'Job Interview Scenario - Advanced Level',
        timestamp: Date.now() - 2 * 60 * 60 * 1000, // 2 hours ago
        points: 150,
        icon: 'play-circle-o',
        color: '#07c160'
    },
    {
        id: 2,
        title: 'Achievement Unlocked',
        description: 'Confident Communicator Badge',
        timestamp: Date.now() - 5 * 60 * 60 * 1000, // 5 hours ago
        points: 100,
        icon: 'medal-o',
        color: '#f39c12'
    },
    {
        id: 3,
        title: 'Daily Challenge Completed',
        description: 'Practice Active Listening',
        timestamp: Date.now() - 24 * 60 * 60 * 1000, // 1 day ago
        points: 50,
        icon: 'star-o',
        color: '#1989fa'
    }
])

// Current goals
const currentGoals = ref([
    {
        id: 1,
        title: 'Complete 30 Training Sessions',
        current: 24,
        target: 30,
        deadline: Date.now() + 7 * 24 * 60 * 60 * 1000 // 1 week from now
    },
    {
        id: 2,
        title: 'Unlock 15 Achievements',
        current: 12,
        target: 15,
        deadline: Date.now() + 14 * 24 * 60 * 60 * 1000 // 2 weeks from now
    },
    {
        id: 3,
        title: 'Reach Level 5',
        current: userLevel.value,
        target: 5,
        deadline: Date.now() + 21 * 24 * 60 * 60 * 1000 // 3 weeks from now
    }
])

// Utility functions
const formatTime = (timestamp: number) => {
    const now = Date.now()
    const diff = now - timestamp
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const days = Math.floor(hours / 24)

    if (days > 0) {
        return `${days} day${days > 1 ? 's' : ''} ago`
    } else if (hours > 0) {
        return `${hours} hour${hours > 1 ? 's' : ''} ago`
    } else {
        return 'Just now'
    }
}

const formatDate = (timestamp: number) => {
    return new Date(timestamp).toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric'
    })
}

// Initialize progress animation
onMounted(() => {
    setTimeout(() => {
        overallProgress.value = Math.min((userStats.value.totalPoints / (userLevel.value * 500)) * 100, 100)
    }, 500)
})
</script>

<style lang="scss" scoped>
.progress-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.overall-progress {
    background: white;
    padding: 24px;
    margin-bottom: 16px;

    .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;

        h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            color: #323233;
        }

        .level-badge {
            display: flex;
            align-items: center;
            gap: 4px;
            background: #fff7e6;
            color: #f39c12;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 14px;
            font-weight: 500;
        }
    }

    .progress-circle {
        display: flex;
        justify-content: center;
        margin-bottom: 24px;
    }

    .progress-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;

        .stat-item {
            text-align: center;

            .stat-number {
                font-size: 24px;
                font-weight: 600;
                color: #323233;
                margin-bottom: 4px;
            }

            .stat-label {
                font-size: 12px;
                color: #969799;
            }
        }
    }
}

.skills-progress {
    background: white;
    padding: 24px;
    margin-bottom: 16px;

    h3 {
        margin: 0 0 20px 0;
        font-size: 18px;
        font-weight: 600;
        color: #323233;
    }

    .skill-list {
        .skill-item {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }

            .skill-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;

                .skill-name {
                    font-size: 14px;
                    font-weight: 500;
                    color: #323233;
                }

                .skill-level {
                    font-size: 12px;
                    color: #969799;
                }
            }

            .skill-description {
                font-size: 12px;
                color: #969799;
                margin-top: 4px;
            }
        }
    }
}

.recent-activities {
    background: white;
    padding: 24px;
    margin-bottom: 16px;

    h3 {
        margin: 0 0 20px 0;
        font-size: 18px;
        font-weight: 600;
        color: #323233;
    }

    .activity-list {
        .activity-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f5;

            &:last-child {
                border-bottom: none;
            }

            .activity-icon {
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background: #f8f9fa;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .activity-content {
                flex: 1;

                .activity-title {
                    font-size: 14px;
                    font-weight: 500;
                    color: #323233;
                    margin-bottom: 4px;
                }

                .activity-description {
                    font-size: 12px;
                    color: #969799;
                    margin-bottom: 4px;
                }

                .activity-time {
                    font-size: 11px;
                    color: #c8c9cc;
                }
            }

            .activity-points {
                color: #07c160;
                font-size: 12px;
                font-weight: 500;
            }
        }
    }
}

.goals-section {
    background: white;
    padding: 24px;
    margin-bottom: 16px;

    h3 {
        margin: 0 0 20px 0;
        font-size: 18px;
        font-weight: 600;
        color: #323233;
    }

    .goals-list {
        .goal-item {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }

            .goal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;

                .goal-title {
                    font-size: 14px;
                    font-weight: 500;
                    color: #323233;
                }

                .goal-progress {
                    font-size: 12px;
                    color: #969799;
                }
            }

            .goal-deadline {
                font-size: 12px;
                color: #969799;
                margin-top: 4px;
            }
        }
    }
}
</style>